<!--
   Copyright 2025 Guan Yushen

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings - General AI Assistant</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
        }
        .top-button-container {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
        }
        .top-button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px 5px 0 0; /* Top-left and top-right rounded corners */
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .top-button-gray {
            padding: 10px 20px;
            background-color: #6e6e6e;
            color: white;
            border: none;
            border-radius: 5px 5px 0 0; /* Top-left and top-right rounded corners */
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .top-button:hover {
            background-color: #0056b3;
        }
        .top-button-gray:hover {
            background-color: #6e6e6e;
        }
        .container {
            max-width: 600px;
            margin: auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 0 0 8px 8px; /* Bottom-left and bottom-right rounded corners */
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .button-container {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
        .model-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .model-item {
            padding: 10px;
            background-color: #e9ecef;
            margin-bottom: 5px;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .model-item:hover {
            background-color: #dfe2e5;
        }
        /* Modal styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 400px; /* Could be more or less, depending on screen size */
            border-radius: 8px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"] , input[type="password"]{
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .save-button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .save-button:hover {
            background-color: #218838;
        }
        .action-buttons {
            display: flex;
            gap: 5px;
        }
        .action-buttons button {
            padding: 5px 10px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="top-button-container" style="margin-bottom: 0px;">
        <button class="top-button" id="promptButton">Toolbar</button>
        <button class="top-button-gray" id="modelButton">Model</button>
    </div>
    <div class="container">
        <h1>Models Settings</h1>
        <div class="button-container">
            <button id="addButton">Add</button>
        </div>
        <ul id="modelList" class="model-list"></ul>
    </div>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Model Information</h2>
            <label for="apiUrl">API URL:</label>
            <input type="text" id="apiUrl" required>
            <label for="model">MODEL:</label>
            <input type="text" id="model" required>
            <label for="apiKey">API KEY:</label>
            <input type="password" id="apiKey" required>
            <button class="save-button" id="saveButton">Save</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            loadModels();

            document.getElementById('addButton').addEventListener('click', () => openModal(-1));

            document.getElementById('saveButton').addEventListener('click', saveModel);

            const modal = document.getElementById('myModal');
            const closeBtn = document.getElementsByClassName('close')[0];

            closeBtn.onclick = () => closeModal();
            window.onclick = (event) => {
                if (event.target == modal) {
                    closeModal();
                }
            };

            // Add event listener to settings button
            document.getElementById('promptButton').addEventListener('click', () => {
                window.location.href = 'ToolBarSettings.html';
            });
        });

        let selectedModelIndex = -1;

        function loadModels() {
            window.electron.loadModels().then(models => {
                const modelList = document.getElementById('modelList');
                modelList.innerHTML = '';
                models.forEach((model, index) => {
                    const li = document.createElement('li');
                    li.className = 'model-item';
                    li.textContent = model.Model;

                    const actionButtons = document.createElement('div');
                    actionButtons.className = 'action-buttons';

                    const editButton = document.createElement('button');
                    editButton.textContent = 'Edit';
                    editButton.addEventListener('click', () => {
                        selectedModelIndex = index;
                        openModal(index);
                    });

                    const deleteButton = document.createElement('button');
                    deleteButton.textContent = 'Delete';
                    deleteButton.addEventListener('click', () => {
                        selectedModelIndex = index;
                        deleteModel();
                    });

                    actionButtons.appendChild(editButton);
                    actionButtons.appendChild(deleteButton);

                    li.appendChild(actionButtons);
                    modelList.appendChild(li);
                });
            }).catch(error => {
                console.error("Error loading models:", error);
            });
        }

        function openModal(index) {
            document.getElementById('myModal').style.display = 'block';
            if (index === -1) {
                // Adding new model
                document.getElementById('apiUrl').value = '';
                document.getElementById('model').value = '';
                document.getElementById('apiKey').value = '';
            } else {
                // Editing existing model
                window.electron.getModel(index).then(model => {
                    document.getElementById('apiUrl').value = model.API_URL;
                    document.getElementById('model').value = model.Model;
                    document.getElementById('apiKey').value = model.API_Key;
                }).catch(error => {
                    console.error("Error getting model:", error);
                    alert('Error getting model, please retry.');
                });
            }
        }

        function closeModal() {
            document.getElementById('myModal').style.display = 'none';
            location.reload(); // Reload the entire page
        }

        async function saveModel() {
            const apiUrl = document.getElementById('apiUrl').value.trim();
            const model = document.getElementById('model').value.trim();
            const apiKey = document.getElementById('apiKey').value.trim();

            if (!apiUrl || !model || !apiKey) {
                alert('All fields are mandatory');
                return;
            }

            try {
                await window.electron.saveModel(apiUrl, model, apiKey, selectedModelIndex);
                loadModels();
                closeModal();
            } catch (error) {
                console.error("Error saving model:", error);
                alert('Error saving model, please retry.');
            }
        }

        async function deleteModel() {
            try {
                await window.electron.deleteModel(selectedModelIndex);
                loadModels();
            } catch (error) {
                console.error("Error deleting model:", error);
                alert('Error deleting model, please retry.');
            }
        }
    </script>
</body>
</html>



